<template>
    <div class="waitConfirmed">
        <div class="searchBox search-box-layout">
            <Row :gutter="24">
                <Col span="4">
                <div>
                    <p class="label">计划名称</p>
                    <div class="ipt">
                        <Input type="text" v-model="searchParams.planName" :placeholder="`${$t('common.inputInfo')}`"
                            clearable class="inputBorder" :maxlength="999"></Input>
                    </div>
                </div>
                </Col>
                <Col span="4">
                <div>
                    <p class="label">{{ $t('保养级别') }}</p>
                    <div class="ipt">
                        <Select v-model="searchParams.servicingLevel" clearable :placeholder="`${$t('common.selectInfo')}`">
                            <Option v-for="item of levelList" :value="item.key" :key="item.key" :label="item.name">
                            </Option>
                        </Select>
                    </div>
                </div>
                </Col>

                <Col span="4">
                <div>
                    <p class="label">状态</p>
                    <div class="ipt">
                        <Select v-model="searchParams.status" clearable :placeholder="`${$t('common.selectInfo')}`">
                            <Option :value="1" label="启用"></Option>
                            <Option :value="0" label="禁用"></Option>
                        </Select>
                    </div>
                </div>
                </Col>
                <Col span="4">
                <div>
                    <p class="label">模具编号</p>
                    <div class="ipt">
                        <Input v-model="searchParams.moldCode" clearable :placeholder="`${$t('common.inputInfo')}`">
                           
                        </Input>
                    </div>
                </div>
                </Col>
                <Col span="4" style="display:flex;flex-direction:column;justify-content: flex-end;">
                <div class="t-c">
                    <div class="ipt">
                        <Button class="search-btn" type="primary" @click="changeNum">
                            {{ $t('common.Query') }}
                        </Button>
                        <Button class="reset-btn" @click="reset()">{{
                            $t('common.reset') }}
                        </Button>
                    </div>
                </div>
                </Col>
            </Row>
        </div>
        <div class="list-layout mt16">
            <div class="btns clear">
                <span class="title">{{ $t('common.listInformation') }}</span>
                <slot name="btns">
                </slot>
                <!-- <Button @click="handleBatchDisabled" v-if="delIds.length"> {{ $t('maintenance.Disable') }} </Button> -->
                <!-- <Button @click="exportTemplate"> {{ $t('common.Download') }}</Button>
                <Button @click="importExcelShow"> {{ $t('common.Import') }} </Button> -->
                <!-- <Button @click="handleBatchDelete" v-if="delIds.length">{{ $t('common.Delete') }} </Button> -->
                <Button @click="getTableColumns(columns)">{{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}</Button>
            </div>
            <div class="tableContent">
                <Table border class="resizable-table" @on-column-width-resize="onColumnWidthResize" ref="selection"
                    :columns="columnsList" :data="data" @on-selection-change="onSelectChange">
                    <template slot-scope="{ row }" slot="action">
                        <span class="operationBtn" v-if="row.status === 0" @click="disabled(row)">
                            <i class="iconfont zy-common-bianji"></i>
                            {{ $t('启用') }}
                        </span>
                        <span class="operationBtn" v-if="row.status === 1" @click="disabled(row)">
                            <i class="iconfont zy-common-bianji"></i>
                            {{ $t('common.disable') }}
                        </span>
                        <span class="operationBtn" @click="look(row)"><i class="iconfont zy-common-chakan"></i>{{
                            $t('common.Check') }}</span>
                        <!-- <span class="operationBtn" @click="edit(row, 'copy')"><i class="iconfont zy-common-bianji"></i>{{
                            $t('复制') }}</span> -->
                        <span class="operationBtn" @click="edit(row)"><i class="iconfont zy-common-bianji"></i>{{
                            $t('common.Edit') }}</span>
                        <span class="operationBtn" @click="deleteRow(row)"><i class="iconfont zy-common-shanchu"></i>{{
                            $t('common.Delete') }}</span>
                    </template>
                </Table>
            </div>
            <div class="pageWrap mt16">
                <pageLeftTitle :total="total" :selected="delIds.length" />
                <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum"
                    @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
            </div>
        </div>
        <Modal :mask-closable="false" v-model="delFaultCodeShowF" :title="$t('common.Delete')" class="modal-title-layout">
            <!-- <Row class="enableContent">
                <Col span="24" class="enableContentInner">
                <img width="95px" src="~images/event/del.png" alt="">
                </Col>
                <Col span="24" class="enableTips">
                <span>删除后不会继续生成保养任务，是否确认删除？</span>
                </Col>
            </Row> -->
            <div class="icon red">
                <i class="iconfont zy-common-shanchu"></i>
            </div>
            <p class="title">
                <span>{{ $t('maintenance.delTip') }}</span>
            </p>
            <div slot="footer">
                <Button type="default" @click="delFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" :loading="delLoading" @click="deleteOk">{{ $t('maintenance.Confirmed') }}
                </Button>
            </div>
        </Modal>

        <Modal :mask-closable="false" v-model="confirmFaultCodeShowF" class="modal-content-layout"
            :title="$t('maintenance.disabledPlan')">
            <Form ref="disabledPlanValidate" :rules="ruleValidate" :model="formInline">
                <FormItem :label="$t('maintenance.disabledCycle')" class="item" prop="disableCycle">
                    <Row>
                        <Col span="24">
                        {{ $t('maintenance.monthMultiplied') }}
                        </Col>
                        <Col span="24">
                        <InputNumber :min="0" :formatter="value => `${parseInt(value)}`" style="width: 100%"
                            v-model="formInline.disableCycle" clearable></InputNumber>
                        </Col>
                        <Col span="24" style="color: #ff0000">{{ $t('maintenance.disableTask') }}</Col>
                    </Row>
                </FormItem>
                <FormItem :label="$t('maintenance.disabledQues')" class="item" prop="reason">
                    <Input type="textarea" v-model="formInline.reason" clearable :rows="6"></Input>
                </FormItem>
                <FormItem label="" class="item">
                    <Row>
                        <Col style="color: #ff0000">
                        {{ $t('maintenance.disabledTip') }}
                        </Col>
                    </Row>
                </FormItem>
            </Form>

            <div slot="footer">
                <Button type="default" @click="disabledCancel">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" :loading="disabledLoading" @click="disabledOk">
                    {{ $t('maintenance.Confirmed') }}
                </Button>
            </div>
        </Modal>
        <Modal :mask-closable="false" v-model="create" :title="`${$t('common.Edit')}`">
            <Form class="formList" :model="formItem" label-position="top" inline>
                <FormItem :label="`${$t('ledger.EquipmentType')}:`" class="item" required>
                    <Select v-model="formItem.classification" filterable clearable
                        :placeholder="`${$t('common.inputInfo')}`">
                        <Option v-for="(item, index) of classification" :value="item.key" :key="index">{{
                            item.name
                        }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem :label="`${$t('maintenance.MaintenanceItem')}:`" required>
                    <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`"
                        class="inputBorder" :maxlength="32"></Input>
                </FormItem>
                <FormItem :label="`${$t('maintenance.Frequency')}:`" class="item" required>
                    <Select v-model="formItem.period" filterable clearable :placeholder="`${$t('common.inputInfo')}`">
                        <Option v-for="(item, index) of period" :value="item.key" :key="index">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem :label="`${$t('spareParts.Specification')}:`">
                    <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`"
                        class="inputBorder" :maxlength="32"></Input>
                </FormItem>
                <FormItem :label="`${$t('maintenance.Checkmethods')}:`">
                    <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`"
                        class="inputBorder" :maxlength="32"></Input>
                </FormItem>
                <FormItem :label="`${$t('maintenance.Checktools')}:`">
                    <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`"
                        class="inputBorder" :maxlength="32"></Input>
                </FormItem>
                <FormItem :label="`${$t('maintenance.UpperLimit')}:`">
                    <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`"
                        class="inputBorder" :maxlength="32"></Input>
                </FormItem>
                <FormItem :label="`${$t('maintenance.LowerLimit')}:`">
                    <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`"
                        class="inputBorder" :maxlength="32"></Input>
                </FormItem>
                <FormItem :label="`${$t('maintenance.Unit')}:`">
                    <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`"
                        class="inputBorder" :maxlength="32"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="default" @click="create = false">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" @click="addOk">{{ $t('maintenance.Confirmed') }}</Button>
            </div>
        </Modal>
        <Modal :mask-closable="false" v-model="actualShowF" :title="$t('maintenance.disabledLog')" width="1200">
            <Table :columns="receiveCol" :data="receivedataArr"></Table>
        </Modal>

        <importExcelModal :importExcelStateF="importExcelState" v-if="importExcelState"
            @importExcelChange="importExcelChange"></importExcelModal>
    </div>
</template>

<script>
import Cascader from '@/components/Cascader/cascader'
import importExcelModal from "@/components/importExcel.vue";
import fileDownload from "js-file-download";
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
    name: 'waitConfirmed',
    mixins: [toggleTableOperation],
    components: { importExcelModal, Cascader },
    props: ['device', 'effPlanList', 'effPlanTotal', 'planIds'],
    data() {
        return {
            customCacheKey: "planefficaciouswaitConfirmed",
            deviceTypeList: [],
            deviceNameList: [],
            text: '',
            planId: '',
            delId: '',
            delIds: this.planIds,
            status: '',
            disabledStatus: '',
            total: this.effPlanTotal,
            pageSize: 10,
            pageNum: 1,
            pageSizeOption: [10, 20, 30, 40],
            delLoading: false,
            delFaultCodeShowF: false,//是否显示删除弹窗
            confirmFaultCodeShowF: false,
            disabledLoading: false,
            create: false,
            actualShowF: false,
            searchParams: {},
            formItem: {},
            formInline: {
                disableCycle: null,
                reason: ''
            },
            ruleValidate: {
                disableCycle: [
                    { required: true, type: 'number', message: "请输入禁用周期", trigger: "blur" },
                ]
            },
            classification: [
                { name: 'CNC', key: 'CNC' },
                { name: 'PLC', key: 'PLC' },
                { name: 'IPC', key: 'IPC' },
            ],
            receiveCol: [
                { title: '禁用时间', key: 'createTime' },
                { title: '禁用人', key: 'createName' },
                { title: '禁用周期(月)', key: 'disableCycle' },
                { title: '禁用原因', key: 'reason' },
                { title: '启用时间', key: 'enableTime' },
                { title: '启用人', key: 'updateName' }
            ],
            period: [
                { name: '月度', key: 'month' },
                { name: '季度', key: 'quarter' },
                { name: '年度', key: 'year' },
            ],
            levelList: [
                { name: "一级保养", key: 1 },
                { name: "二级保养", key: 2 },
                { name: "三级保养", key: 3 },
            ],
            category: [
                { label: 'A', value: 'A' },
                { label: 'B', value: 'B' },
                { label: 'C', value: 'C' },
            ],
            cycle: [
                { name: "全部", key: "" },
                { name: "日", key: "1" },
                { name: "周", key: "2" },
                { name: "月", key: "3" },
                { name: "季度", key: "4" },
                { name: "半年度", key: "5" },
                { name: "年度", key: "6" },
                { name: "班次", key: "7" },
                { name: "计时", key: "8" },
            ],
            columns: [
                {
                    type: 'selection',
                    align: 'center',
                    width: 60
                },
                {
                    title: "计划名称",
                    key: 'planName',
                    width: 200,
                    align: "center",
                    tooltip: true,
                    resizable: true,
                },
                {
                    title: "模具数量",
                    key: 'moldCount',
                    width: 200,
                    align: "center",
                    tooltip: true,
                    resizable: true,
                    //  render: (h, params) => {
                    //     return h('div', [
                    //         h('span', {}, params.row.mmodList?params.row.mmodList.length:0)
                    //     ])
                    // }
                },
                {
                    title: `${this.$t('保养级别')}`,
                    key: "servicingLevel",
                    minWidth: 160,
                    align: "center",
                    tooltip: true,
                    resizable: true,
                    render: (h, params) => {
                        return h('div', [
                            h('span', {}, this.levelList.find(val => val.key === params.row.servicingLevel).name)
                        ])
                    }
                },
                {
                    title: "触发条件",
                    key: 'triggerCondition',
                    minWidth: 150,
                    align: "center",
                    tooltip: true,
                    resizable: true, tooltip: true,
                },
                {
                    title: `${this.$t('首次生成时间')}`,
                    key: 'firstTime',
                    minWidth: 200,
                    align: "center",
                    tooltip: true,
                    resizable: true
                },
                {
                    title: `${this.$t('计划截止时间')}`,
                    key: 'planEndTime',
                    minWidth: 200,
                    align: "center",
                    tooltip: true,
                    resizable: true
                },
                {
                    title: "计划创建时间",
                    key: 'createTime',
                    minWidth: 190,
                    align: "center",
                    tooltip: true,
                    resizable: true
                },
                // {
                //     title: `${this.$t('禁用记录')}`,
                //     key: 'disableNum',
                //     minWidth: 130,
                //     align: "center",
                //     tooltip: true,
                //     resizable: true, tooltip: true,
                //     render: (h, params) => {
                //         if (params.row.disableNum > 0) {
                //             return h('div', [
                //                 h('a', {
                //                     style: {},
                //                     on: {
                //                         click: () => {
                //                             this.getActualNum(params.row)
                //                         }
                //                     }
                //                 }, params.row.disableNum)
                //             ])
                //         } else {
                //             return h('div', [
                //                 h('a', {}, params.row.disableNum)
                //             ])
                //         }
                //     }
                // },
                {
                    title: `${this.$t('创建人')}`,
                    key: 'realname',
                    minWidth: 160,
                    align: "center",
                    tooltip: true,
                    resizable: true
                },
                // {
                //     title: `${this.$t('创建时间')}`,
                //     key: 'createTime',
                //     minWidth: 200,
                //     align: "center",
                //     tooltip: true,
                //     resizable: true
                // },
                // {
                //     title: `${this.$t('设备等级')}`,
                //     key: 'categoryName',
                //     minWidth: 160,
                //     align: "center",
                //     tooltip: true,
                //     resizable: true, tooltip: true,

                //     render: (h, params) => {
                //         return h('div', [
                //             h('span', {}, params.row.categoryName)
                //         ])
                //     }
                // },
                // {
                //     title: `${this.$t('设备类别')}`,
                //     key: "deviceType",
                //     minWidth: 180,
                //     align: "center",
                //     tooltip: true,
                //     resizable: true, tooltip: true,
                // },
                // {
                //     title: `${this.$t('保养周期')}`,
                //     key: "triggerCycleName",
                //     minWidth: 160,
                //     align: "center",
                //     tooltip: true,
                //     render: (h, params) => {
                //         return h('div', [
                //             h('span', {}, this.cycle.find(val => Number(val.key) === Number(params.row.triggerCycle)).name)
                //         ])
                //     },
                //     resizable: true, tooltip: true,
                // },
                {
                    title: `${this.$t('common.operation')}`,
                    slot: "action",
                    fixed: 'right',
                    minWidth: this.util.autoWidth(400, 370),
                    align: 'center'
                },
            ],
            importExcelState: false,
            data: this.effPlanList,
            receivedataArr: [],
            position: []
        }
    },
    watch: {
        // device(newVal) {
        //   console.log(newVal)
        //   this.category = newVal
        // },
        effPlanList(newVal) {
            this.data = newVal
        },
        effPlanTotal(newVal) {
            this.total = newVal
        },
        planIds(newVal) {
            this.delIds = newVal
        },
    },
    activated() {
        // this.getFaultCategory("设备类型")
    },
    created() {
        console.log();
        this.getTableColumnsWidth(this.columns)
    },
    mounted() {
        this.getFaultCategory("设备类型")
    },
    methods: {
        importExcelChange(val) {
            this.importExcelState = false;
            if (val === "success") {
                this.$Message.success("导入成功");
                this.changeNum();
            }
        },
        //下载模板
        exportTemplate() {
            const filName = "有效计划下载模板";
            this.axios({
                method: "get",
                url: "/dms/dcmMaintainPlan/downloadTemplate",
                responseType: "blob",
            }).then((res) => {
                fileDownload(res, filName + ".xlsx");
            });
        },
        /*导入*/
        importExcelShow() {
            this.importExcelState = true;
        },
        deviceNameChange(val) {
            if (val) {
                this.searchParams.deviceType = val
            }
        },
        //获取故障数据
        getFaultCategory(name) {
            this.axios({
                method: 'get',
                url: '/dms/faultCategory/basicDict',
                params: { name }
            }).then(res => {
                if (res.code === 200) {

                    if (name === '故障分类') {
                        this.faultCategoryList = res.data.map(item => {
                            if (item.value) return item;
                        })
                    } else if (name === '设备类型') {
                        this.deviceTypeList = res.data.map(item => {
                            if (item.value) return item;
                        })
                    }
                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }))
                }
            })
        },
        getDeviceNameList(deviceName) {
            this.axios({
                method: 'get',
                url: '/dms/dcmMaintainItem/selectDeviceNames',
                params: {
                    deviceName
                }
            }).then(res => {
                if (res.code == 200) {
                    this.deviceNameList = res.data.map(val => ({
                        label: val,
                        value: val
                    }))
                }
            })
        },
        onSelectChange(selection) {
            console.log(selection)
            let myArray = [];
            selection.map((item) => {
                myArray.push(item.id);
            });

            this.delIds = myArray;
        },
        deleteOk() {
            this.delLoading = true
            if (this.status == 0) {
                this.axios({
                    method: 'delete',
                    url: '/dms/servicingPlan/delete',
                    data: {
                        id: this.delId
                    }
                }).then(res => {

                    if (res.code === 200) {
                        this.searchList()
                        this.$Message.success(({ content: '删除成功！', duration: 2, closable: true }));
                    } else {
                        this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                    }
                }).finally(() => {
                    this.delLoading = false
                    this.delFaultCodeShowF = false
                })
            } else {
                this.axios({
                    method: 'delete',
                    url: '/dms/dcmMaintainPlan/deleteBatch',
                    params: {
                        ids: this.delIds.toString()
                    }
                }).then(res => {

                    if (res.code === 200) {
                        this.searchList()
                        this.$Message.success(({ content: '批量删除成功！', duration: 2, closable: true }));
                    } else {
                        this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                    }
                }).finally(() => {
                    this.delLoading = false
                    this.delFaultCodeShowF = false
                })
            }


        },
        confirm(row) {
            //点击展示提示删除弹窗
            this.confirmFaultCodeShowF = true;
            this.planId = row.id
            this.disabledStatus = 0
            console.log(row, 'row')
        },
        deleteRow(row) {
            //点击展示提示删除弹窗
            this.delFaultCodeShowF = true;
            this.delId = row.id
            this.status = 0
            console.log(row, 'row')
        },
        handleBatchDelete() {
            console.log('批量')
            //点击展示提示删除弹窗
            this.delFaultCodeShowF = true;
            this.status = 1
        },
        handleBatchDisabled() {
            this.disabledStatus = 1
            this.confirmFaultCodeShowF = true
        },
        disabledCancel() {
            this.confirmFaultCodeShowF = false
            this.$refs.disabledPlanValidate.resetFields()
        },
        disabledOk() {
            if (this.disabledStatus == 0) {
                let data = {
                    planId: this.planId,
                    disableCycle: this.formInline.disableCycle,
                    reason: this.formInline.reason,
                }
                this.$refs.disabledPlanValidate.validate(valid => {
                    if (valid) {
                        this.disabledLoading = true
                        this.axios({
                            method: 'post',
                            url: '/dms/dcmMaintainDisableRecord/disable',
                            data
                        }).then(res => {

                            if (res.code === 200) {
                                this.searchList()
                                this.$Message.success(({ content: '禁用成功！', duration: 2, closable: true }));
                            } else {
                                this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                            }
                        }).finally(() => {
                            this.confirmFaultCodeShowF = false
                            this.disabledLoading = false
                            this.$refs.disabledPlanValidate.resetFields()
                        })
                    }
                })
            } else {
                let data = {
                    planIds: this.delIds.toString(),
                    disableCycle: this.formInline.disableCycle,
                    reason: this.formInline.reason,
                }
                this.$refs.disabledPlanValidate.validate(valid => {
                    if (valid) {
                        this.disabledLoading = true
                        this.axios({
                            method: 'post',
                            url: '/dms/dcmMaintainDisableRecord/batchDisable',
                            data
                        }).then(res => {

                            if (res.code === 200) {
                                this.searchList()
                                this.$Message.success(({ content: '批量禁用成功！', duration: 2, closable: true }));
                            } else {
                                this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                            }
                        }).finally(() => {
                            this.confirmFaultCodeShowF = false
                            this.disabledLoading = false
                            this.$refs.disabledPlanValidate.resetFields()
                        })
                    }
                })
            }


        },
        look(row) {
            this.$emit('changeDetailVisible', true, row.id)
        },
        getActualNum(row) {
            // if (this.permission.dcmMaintainDisableRecordList) {
            //     this.actualShowF = true
            //     this.getActualDetail(row.id)
            //     console.log(row, 'row')
            // }
            this.actualShowF = true
            this.getActualDetail(row.id)
        },
        disabled(row) {
            let params = {
                id: row.id,
            }
            this.axios({
                url: row.status == 1 ? '/dms/servicingPlan/disable' : '/dms/servicingPlan/enable',
                method: 'put',
                params,
            }).then(res => {
                if (res.code === 200) {
                    this.changeNum();
                    this.$Message.success(res.msg);
                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                }
            })
        },
        getActualDetail(planId) {
            this.axios({
                method: 'get',
                url: '/dms/dcmMaintainDisableRecord/list',
                params: {
                    planId
                }
            }).then(res => {

                if (res.code === 200) {
                    this.receivedataArr = res.data
                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                }
            }).finally(() => {
            })
        },
        addOk() {
        },
        reset() {
            this.searchParams = {}
            // this.$refs.CascaderInfo.value = []
            this.changeNum();
        },
        //分页
        changeNum() {
            this.pageNum = 1;
            this.searchList();
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.searchList();
        },
        changePageNum(val) {
            this.pageNum = val;
            this.searchList();
        },
        searchList() {
            let data = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                ...this.searchParams,
            };
            this.axios({
                method: 'post',
                url: '/dms/servicingPlan/getPage',
                data
            }).then(res => {

                if (res.code === 200) {
                    this.data = res.data.records
                    this.total = res.data.total
                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                }
            })
        },
        ok() {
        },
        cancel() {
        },
        edit(row, str) {
            if (str === 'copy') {
                this.$store.commit('detail/SET_COPYSTATUS', true)
            } else {
                this.$store.commit('detail/SET_COPYSTATUS', false)
            }
            this.$emit('addMaintain', true, row)
        },
    },
}
</script>

<style scoped lang="scss">
/*.waitConfirmed {*/
/*  height: calc(100% - 100px);*/
/*  overflow: scroll;*/
/*}*/
.addModal {
    .addProject {
        .modalTitle {
            position: relative;

            span {
                font-weight: bold;
                font-size: 20px;
            }

            .label {
                display: flex;
                flex-wrap: wrap;

                .item {
                    display: flex;

                    label {
                        width: 150px;
                        height: 100%;
                        background: #F5F6F7;
                    }

                    &>div {
                        width: 330px;
                    }
                }

                .cycle {
                    display: flex;

                    .ivu-form-item-label {
                        width: 150px;
                        height: 100%;
                        background: #F5F6F7;
                    }

                    .ivu-form-item-content {
                        border: 1px solid #EEEEEE;
                        width: 800px;

                        .ivu-checkbox-wrapper {
                            margin-left: 30px;
                        }
                    }
                }
            }
        }

        .modalTitle::before {
            content: '';
            position: absolute;
            width: 3px;
            height: 20px;
            top: 5px;
            left: -10px;
            background: #187BDB;
        }

        .tab {
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .icon {
                border: 1px solid #187BDB;
                border-radius: 30px;
                padding: 5px 20px 5px 20px;
                display: flex;
                align-items: center;
                margin-left: 20px;
                color: #187BDB;

                i {
                    font-size: 20px;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>
